
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2012-2024全球GDP排行榜</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #container { width: 900px; height: 600px; margin: 30px auto }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        const chart = echarts.init(document.getElementById('container'));
        
        // 2012-2024年GDP数据（单位：万亿美元）
        const gdpData = {
            years: [2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024],
            countries: ['美国','中国','日本','德国','英国','法国','印度','意大利','巴西','加拿大'],
            series: [
                [16.25,16.78,17.52,18.22,18.71,19.49,20.58,21.43,20.94,23.32,26.01,27.72,29.18], //美国
                [8.53,9.57,10.48,11.06,11.23,12.14,13.89,14.34,14.69,17.73,17.88,17.79,18.94],  //中国
                [6.27,4.92,4.85,4.39,4.95,4.87,5.04,5.08,5.06,5.01,4.26,4.20,4.02],  //日本
                [3.60,3.73,3.88,3.36,3.47,3.68,3.95,3.86,3.85,4.26,4.16,4.53,4.66],  //德国
                [2.71,2.80,3.04,2.89,2.65,2.62,2.83,2.83,2.71,3.13,3.11,3.38,3.64],  //英国
                [2.68,2.81,2.85,2.42,2.47,2.58,2.78,2.72,2.63,2.96,2.80,3.05,3.16],  //法国
                [1.83,1.86,2.04,2.10,2.29,2.65,2.72,2.87,2.67,3.15,3.35,3.57,3.98],  //印度
                [2.01,2.13,2.17,1.83,1.86,1.95,2.08,2.00,1.89,2.11,2.10,2.30,2.37],  //意大利
                [2.47,2.39,2.46,1.80,1.79,2.06,1.92,1.84,1.45,1.65,1.95,2.17,2.17],  //巴西
                [1.83,1.84,1.79,1.55,1.53,1.65,1.73,1.74,1.64,2.00,2.16,2.14,2.24]   //加拿大
            ]
        };

        const option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    data: gdpData.years,
                    autoPlay: true,
                    playInterval: 1500,
                    left: '10%',
                    right: '10%'
                },
                title: { 
                    text: '2012-2024全球GDP前十国家(万亿美元)',
                    subtext: '数据来源：世界银行/IMF',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}万亿$`;
                    }
                },
                grid: { top: 100, bottom: 120 },
                xAxis: { type: 'value' },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    axisLabel: { fontSize: 12 }
                },
                series: [{
                    name: 'GDP',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}万亿$'
                    },
                    itemStyle: {
                        color: params => {
                            const colorList = [
                                '#c23531','#2f4554','#61a0a8',
                                '#d48265','#91c7ae','#749f83',
                                '#ca8622','#bda29a','#6e7074',
                                '#546570'
                            ];
                            return colorList[params.dataIndex];
                        }
                    }
                }]
            },
            options: gdpData.years.map(year => {
                const yearIndex = gdpData.years.indexOf(year);
                const sortedData = gdpData.series.map((arr,i) => ({
                    name: gdpData.countries[i],
                    value: arr[yearIndex]
                })).sort((a,b) => b.value - a.value).slice(0,10);
                
                return {
                    title: { text: year + '年全球GDP排名' },
                    yAxis: { data: sortedData.map(item => item.name) },
                    series: [{
                        data: sortedData.map(item => item.value)
                    }]
                };
            })
        };

        chart.setOption(option);
        window.addEventListener('resize', chart.resize);
    </script>
</body>
</html>
